<template>
  <div class="app-container">
    <el-page-header @back="goBack" content="参考人员列表"></el-page-header>

    <el-table :data="participants" style="width: 100%">
      <el-table-column prop="userId" label="用户ID" width="180"></el-table-column>
      <el-table-column prop="userName" label="用户名"></el-table-column>
      <el-table-column prop="nickName" label="昵称"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phonenumber" label="手机号"></el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      class="pagination-container">
    </el-pagination>
  </div>
</template>
<script>
import {getStuListOfActivity} from "@/api/exam/examActivity";


export default {
  data() {
    return {
      examId: null,
      groupId: null,
      participants: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created() {
    console.log('created')

    this.examId = this.$route.params.examId
    console.log('examId', this.examId, "       ", this.$route.query.examId)
    console.log('groupId', this.examId, "       ", this.$route.query.groupId)
    this.groupId = this.$route.params.groupId
    this.loadParticipants()
  },
  methods: {
    async loadParticipants() {
      console.log('loadParticipants')
      try {
        const response = await getStuListOfActivity({
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
          examId: this.examId,
          groupId: this.groupId
        })

        this.participants = response.rows
        this.pagination.total = response.total
      } catch (error) {
        this.$message.error('加载参考人员失败: ' + error.message)
      }
    },

    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.loadParticipants()
    },

    handleCurrentChange(val) {
      this.pagination.pageNum = val
      this.loadParticipants()
    },

    goBack() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1)
    }
  }
}
</script>
